<template>
  <div>
    <el-button
      @click="handleClick('manage')"
      :type="activeName == 'manage' ? 'primary' : ''"
      style="margin-right: 10px"
      >试卷管理</el-button
    >
    <el-dropdown>
      <el-button :type="activeName == 'create' ? 'primary' : ''">
        创建试卷<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="handleClick('create', 1)"
          >创建普通试卷</el-dropdown-item
        >
        <el-dropdown-item @click.native="handleClick('create', 2)"
          >创建随机试卷</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <div class="wrap">
      <component :is="activeName" :paperType="paperType" />
    </div>
  </div>
</template>
<script>
export default {
  components: {
    manage: () => import('./List.vue'),
    create: () => import('./Add.vue'),
  },
  data() {
    return {
      paperType: 1,
    }
  },
  computed: {
    activeName() {
      return this.$store.state.question.activeName
    },
  },
  mounted() {
    this.handleClick('manage')
  },
  methods: {
    handleClick(v, paperType) {
      this.paperType = paperType
      this.$store.commit('SET_ACTIVENAME', v)
      this.$store.commit('SET_ACTIVEROW', {})
    },
  },
}
</script>
<style scoped lang="scss">
.wrap {
  padding: 20px 10px;
  max-height: 600px;
  overflow-y: auto;
}
</style>